import React from 'react'
import { connect } from 'dva';
import {
    Form,
    Input,
    TreeSelect,
    Divider,
    Checkbox,
    Radio
} from 'antd';

import './Video.scss';
import './Right.scss';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const RadioButton = Radio.Button;
const TreeNode = TreeSelect.TreeNode;

@connect(({ add, video }) => ({
    add: add,
    video: video
}))
@Form.create({
    onValuesChange: (AddVideo, changedValues) => {
        AddVideo.dispatch({
            type: 'add/setFields',
            data: changedValues
        })
    },
    /**
     * 从redux初始化Form数据
     */
    mapPropsToFields(props) {
        let data;
        let { articleData } = props.add;
        articleData.forEach((item) => {
            if (item.id == props.add.currentActiveArticle) {
                data = item.data;
            }
        })

        if (articleData.length > 0) {
            return {
                plate_id: Form.createFormField({  //分类id
                    value: data.plate_id,
                }),
                reporter: Form.createFormField({      //记者
                    value: data.reporter,
                }),
                editor: Form.createFormField({   //编辑
                    value: data.editor,
                }),
                position: Form.createFormField({ //地址
                    value: data.position,
                }),
                resource: Form.createFormField({  //来源
                    value: data.resource,
                }),
                is_comment: Form.createFormField({  //允许评论
                    value: data.is_comment,
                }),
                is_ad: Form.createFormField({  //允许广告
                    value: data.is_ad,
                }),
                is_reprint: Form.createFormField({  //允许转载
                    value: data.is_reprint,
                }),
                is_check_comment: Form.createFormField({  //评论审核
                    value: data.is_check_comment ? 1 : 0,
                }),
                is_original: Form.createFormField({  //是否原创
                    value: data.is_original,
                }),
                default_scan_num: Form.createFormField({  //点击量
                    value: data.default_scan_num,
                }),
                default_forward_num: Form.createFormField({  //转发量
                    value: data.default_forward_num,
                }),
                default_thumbs_up_num: Form.createFormField({  //点赞量
                    value: data.default_thumbs_up_num,
                }), scan_num: Form.createFormField({  //实际点击量
                    value: data.scan_num,
                }),
                forward_num: Form.createFormField({  //实际转发量
                    value: data.forward_num,
                }),
                thumbs_up_num: Form.createFormField({  //实际点赞量
                    value: data.thumbs_up_num,
                }),
            }
        } else {
            return {}
        }
    }
})
export default class Right extends React.PureComponent {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {

    }


    render() {
        const {
            form: { getFieldDecorator },
        } = this.props;
        // let values =  this.props.form.getFieldValues();
        // console.log(values,'115');
        return (
            <div className="Right">
                <FormItem label={<span className="title">分类<span className="red">（必填）</span></span>}>
                    {getFieldDecorator('plate_id')(
                        <TreeSelect
                            style={{ width: 300 }}
                            dropdownStyle={{ maxHeight: 400 }}
                            dropdownMatchSelectWidth
                            placeholder="请选择分类"
                            allowClear
                            treeDefaultExpandAll
                        >
                            {this.props.add.plateList.map((item) => {
                                let children = item.children ? item.children : [];
                                return (
                                    <TreeNode disabled={children.length > 0 ? true : false} value={item.plate_id} title={item.plate_name} key={item.plate_id}>
                                        {children.map((item2) => {
                                            return <TreeNode value={item2.plate_id} title={item2.plate_name} key={item2.plate_id} />
                                        })}
                                    </TreeNode>
                                )
                            })}
                        </TreeSelect>
                    )}
                </FormItem>
                <FormItem label={<span className="title">记者<span className="hs">（选填）</span></span>}>
                    {getFieldDecorator('reporter', {
                        initialValue: this.props.video.initTableName
                    })(<Input placeholder="记者" />)}
                </FormItem>
                <FormItem label={<span className="title">编辑<span className="hs">（选填）</span></span>}>
                    {getFieldDecorator('editor')(<Input placeholder="编辑" />)}
                </FormItem>
                <FormItem label={<span className="title">地址<span className="hs">（选填）</span></span>}>
                    {getFieldDecorator('position')(<Input placeholder="地址" />)}
                </FormItem>
                <FormItem label={<span className="title">来源<span className="hs">（选填）</span></span>}>
                    {getFieldDecorator('resource')(<Input placeholder="来源" />)}
                </FormItem>
                <Divider />
                <div className="article">
                    <div className="a-title">文章选择</div>
                    <div className="checkbox">
                        {getFieldDecorator('is_comment', {
                            valuePropName: 'checked',
                            getValueFromEvent: (e) => {
                                if (e.target.checked) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }
                        })(
                            <Checkbox value="1">允许评论</Checkbox>
                        )}
                        {getFieldDecorator('is_check_comment', {
                            valuePropName: 'checked',
                            getValueFromEvent: (e) => {
                                if (e.target.checked) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }
                        })(
                            <Checkbox value="1">评论审核</Checkbox>
                        )}
                        {getFieldDecorator('is_ad', {
                            valuePropName: 'checked',
                            getValueFromEvent: (e) => {
                                if (e.target.checked) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }
                        })(
                            <Checkbox value="1">允许广告</Checkbox>
                        )}
                        {getFieldDecorator('is_reprint', {
                            valuePropName: 'checked',
                            getValueFromEvent: (e) => {
                                if (e.target.checked) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }
                        })(
                            <Checkbox value="1">允许转载</Checkbox>
                        )}
                        {getFieldDecorator('is_original', {
                            valuePropName: 'checked',
                            getValueFromEvent: (e) => {
                                if (e.target.checked) {
                                    return 1;
                                } else {
                                    return 0;
                                }
                            }
                        })(
                            <Checkbox value="1">是否原创</Checkbox>
                        )}
                    </div>
                </div>
                {this.props.add.configJson.isVirtualViewData !== false ? <><Divider />
                    <FormItem label={<span className="title">1点击量<span className="hs">（基数、前端显示为基数+实际数）</span></span>}>
                        基数：
                    {getFieldDecorator('default_scan_num')(<Input className="input" placeholder="输入基数" />)} +
                    <div>实际数：{this.props.form.getFieldValue('scan_num')}</div> = 总数：{parseInt(this.props.form.getFieldValue('default_scan_num')) + parseInt(this.props.form.getFieldValue('scan_num'))}
                    </FormItem>
                    <FormItem label={<span className="title">转发量<span className="hs">（基数、前端显示为基数+实际数）</span></span>}>
                        {getFieldDecorator('default_forward_num')(<Input className="input" placeholder="输入基数" />)} +
                    <div>实际数：{this.props.form.getFieldValue('forward_num')}</div> = 总数：{parseInt(this.props.form.getFieldValue('default_forward_num')) + parseInt(this.props.form.getFieldValue('forward_num'))}
                    </FormItem>
                    <FormItem label={<span className="title">点赞量<span className="hs">（基数、前端显示为基数+实际数）</span></span>}>
                        {getFieldDecorator('default_thumbs_up_num')(<Input className="input" placeholder="输入基数" />)}
                        <div>实际数：{this.props.form.getFieldValue('thumbs_up_num')}</div>= 总数：{parseInt(this.props.form.getFieldValue('default_thumbs_up_num')) + parseInt(this.props.form.getFieldValue('thumbs_up_num'))}
                    </FormItem></> : null}
            </div>
        )
    }
}
